<template>
    <div class="cmt-container">
        <h3>发表评论</h3>
        <hr>
        <textarea placeholder="请发表你的评论（最多255字）" maxlength="255" v-model="commentContent"></textarea>
        <mt-button type="primary" size="large" @click="publishComment">发表</mt-button>

        <div class="cmt-list">
            <div class="cmt-item" v-for="(item, index) in commentList" :key="item.id">
                <div class="cmt-title">
                    {{index+1}}楼：&nbsp;&nbsp;用户：匿名用户&nbsp;&nbsp;发布时间：{{item.publishTime | dateFormat}}
                </div>
                <div class="cmt-content">
                    {{item.content}}
                </div>
            </div>
            <div v-if="this.commentList.length == 0" class="ifnull">
                暂无评论
            </div>
        </div>

        <mt-button type="danger" size="large" @click="getMore" plain>加载更多</mt-button>

    </div>    
</template>

<script>
import qs from 'qs'
import {Toast} from 'mint-ui'
export default {
    props: ['pathurl', 'id', 'type'],
    data() {
        return {
            pageNumber: 0,
            commentList: [],
            commentContent: null
        }
    },
    created() {
        this.getComment();
    },
    methods: {
        getComment(){
            this.axios.get(this.pathurl, {
                params: {
                    type: this.type,
                    id: this.id,
                    pageNumber: this.pageNumber
                }
            }).then( response => {
                if (response.data.success) {
                    if (response.data.data == null || response.data.data.length == 0){
                        Toast("没有更多评论了");
                    } else {
                        this.splicingComment(response.data.data);
                    }
                } else {
                    Toast("加载评论失败");
                }
            })
        },
        getMore(){
            this.pageNumber = this.pageNumber+1;
            this.getComment();
        },
        // 拼接评论
        splicingComment(list){
            if ( list.length != 0){
                this.commentList = this.commentList.concat(list);
            }
        },
        publishComment(){
            this.axios.post('/admin/comment/publishComment', JSON.stringify({
                "type": this.type,
                "belongTo": this.id,
                "publishTime": this.dateFormat01(new Date()),
                "content": this.commentContent
            }), {
                params: {
                    ids: this.id
                },
                headers: {
                    'content-type': 'application/json'
                }
            }).then (response => {
                if(this.commentContent != null){
                    if(response.data.success){
                        Toast("发表成功");
                        this.commentList = [];
                        this.pageNumber = 0;
                        this.getComment();
                        this.commentContent = null;
                    } else {
                        Toast("发表失败");
                    }
                } else {
                    Toast("评论不可为空");
                }
                
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.cmt-container{
    h3{
        font-size: 16px;
    }
    textarea{
        font-size: 14px;
        margin: 0;
        height: 80px;
    }
    .cmt-list{
        margin: 5px 0;
        .cmt-item{
            font-size: 12px;
            .cmt-title{
                background-color: #ccc;
                line-height: 30px;
            }
            .cmt-content{
                line-height: 35px;
                text-indent: 1em;
            }
        }
        .ifnull{
            margin-top: 10px;
            margin-bottom: 10px;
            font-size: 13px;
            text-align: center;
            color: gray;
        }
    }
}
</style>